<template>
	<ul class="container">
		<li class="item" v-for="item in data.data" :key="item.goods_id">
			<router-link :to="'/goodsDetail/' + item.goods_id + '/noStory'">
				<div class="img-contant">
					<img v-lazy.container="item.goods_image" />
					<div class="goods-tag">
						<span class="label" v-if="item.goods_label_text">{{item.goods_label_text}}</span>
						<div class="price-content">
							<em class="icon-circle"></em>
							<span class="price">￥{{item.goods_price}}</span>
						</div>
					</div>
				</div>
				<div class="text-intro">
					<span class="title">{{item.goods_name}}</span>
					<span class="type">{{item.gc_name}}</span>
				</div>
			</router-link>
		</li>
	</ul>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				require: true
			}
		},
		mounted(){
			console.log(this.data)
		}
	}
</script>

<style lang="scss" scoped>
	img[lazy=loading] {
	  width: 40px;
	  height: 300px;
	  margin: auto;
	  background-image: url(http://47.98.119.130/test/img/loding.gif);
	  background-repeat: no-repeat;
	  background-position: 50% 50%;
	}
	.container {
		.item {
			margin-bottom: 30px;
			.img-contant {
				position: relative;
				height: 404px;
				margin-bottom: 32px;
				img {
					display: block;
					width: 100%;
					height: 100%;
				}
				.goods-tag {
					display: flex;
					flex-direction: column;
					position: absolute;
					right: -8px;
					bottom: 40px;
					.label {
						height: 56px;
						background-color: #ef364e;
						color: #FFFFFF;
						font-size: 28px;
						text-align: center;
						line-height: 56px;
					}
					.price-content {
						display: flex;
						align-items: center;
						height: 56px;
						padding: 0 20px;
						background-color: #000;
						.icon-circle {
							flex-shrink: 0;
							width: 10px;
							height: 10px;
							border: 2px solid #f00;
							border-radius: 50%;
							margin-right: 10px;
						}
						.price {
							color: #fff;
							font-size: 26px;
						}
					}
				}
			}
			.text-intro {
				display: flex;
				flex-direction: column;
				.title {
					font-size: 40px;
					color: #4a4a4a;
					margin-bottom: 14px;
				}
				.type {
					font-size:28px;
					color:#9b9b9b;

				}
			}
		}
	}
</style>